<template>
  <el-row justify="center">
    <el-col style="background-color: #ffffff;">
      <el-form :inline="true" size="small">
        <el-form-item label="关键检索">
          <el-input v-model="value" style="width: 215px" placeholder="关键检索"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="select">查询</el-button>
          <el-button  @click="reset">重置</el-button>
<!--          <el-button type="primary" @click="add">添加</el-button>-->
        </el-form-item>
      </el-form>
    </el-col>
    <el-col style="background-color: #ffffff;">
      <vxe-table
          :data="tableData"
          :row-config="{isHover: true}"
          :header-cell-style="{'text-align':'center'}"
          :stripe="true"
          height="588"
          border>
        <vxe-column field="packageName" title="安装包名称" ></vxe-column>
        <vxe-column field="version" title="版本号" width="120"></vxe-column>
        <vxe-column field="releaseDate" title="发布时间" width="260"></vxe-column>
        <vxe-column field="downloadPath" title="下载地址"></vxe-column>
        <vxe-column field="downloadNum" title="下载次数" width="120"></vxe-column>
      </vxe-table>
    </el-col>
  </el-row>
</template>

<script>
/**
 *{ 开发包管理 }
 * @param:
 * @author: 李世威
 * @DateTime: 2022/9/20
 */
import {findList} from "@/api/operations-center/package";
export default {

  name: "packageList",
  data(){
    return{
      // 列表数据
      tableData: [],
      value: "",
    }
  },
  mounted() {
    this.getFindList();
  },
  methods:{
    getFindList() {
      this.tableData = [];
      findList().then(res => {
        console.log(res)
        if (res.code == 200) {
          for(let i=0;i<res.data.length;i++){
            if(res.data[i].packageName.match(this.value) || this.value == ""){
              this.tableData.push(res.data[i]);
            }
          }
        }
      })
    },
    select(){
      this.getFindList();
    },
    reset(){
      this.value = "";
      this.getFindList();
    },
    add(){
      this.$router.push({
        name: 'developmentAdd'
      });
    },
  }
}
</script>

<style scoped>

</style>
